<script setup>
import HomePanel from './HomePannel.vue'
// import { getNewListApi } from '@/api/vehicle'
import { getNewListApi } from '@/api/publish'
import { ref, onMounted } from 'vue'
const carList = ref([])
const setCarList = async () => {
  const res = await getNewListApi()
  carList.value = res.data
}
onMounted(() => setCarList())
</script>

<template>
  <div class="home-product">
    <HomePanel title="今日上新" subTitle="新鲜出炉 品质靠谱">
      <ul class="cars-list">
        <li v-for="car in carList" :key="car.id">
          <CarItemPublish :car="car"></CarItemPublish>
        </li>
      </ul>
    </HomePanel>
  </div>
</template>

<style scoped lang="scss">
.home-product {
  .cars-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;

    li {
      margin-right: 20px;
      margin-bottom: 20px;

      &:nth-last-child(-n + 5) {
        margin-bottom: 0;
      }

      &:nth-child(5n) {
        margin-right: 0;
      }
    }
  }
}
</style>
